<template>
    <el-card class="sku-list">
        <el-table border stripe :data="skuList" v-loading="loading">
            <el-table-column type="index" label="序号" width="80" align="center" row-key="id"></el-table-column>

            <el-table-column prop="skuName" label="名称" />

            <el-table-column prop="skuDesc" label="描述" />

            <el-table-column label="默认图片" width="150" align="center">
                <template slot-scope="{ row }">
                    <div class="info">
                        <div class="pic">
                            <img :src="row.skuDefaultImg" alt="商品图片" style="width: 80px" />
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="weight" label="重量(KG)" />

            <el-table-column prop="price" label="价格(元)" width="80" />

            <el-table-column label="操作" width="250" align="center">
                <template slot-scope="{ row }">
                    <el-tooltip effect="dark" v-if="row.isSale == 0" content="上架" placement="top">
                        <el-button
                            type="info"
                            size="mini"
                            @click="onSale(row.id)"
                            icon="el-icon-top"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" v-if="row.isSale == 1" content="下架" placement="top">
                        <el-button
                            type="success"
                            size="mini"
                            icon="el-icon-bottom"
                            @click="cancelSale(row.id)"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" v-if="row.isSale == 1" content="修改" placement="top">
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-edit"
                            @click="toUpdateSku(row.id)"
                        ></el-button>
                    </el-tooltip>

                    <el-tooltip effect="dark" content="查看详情" placement="top">
                        <el-button
                            type="info"
                            size="mini"
                            icon="el-icon-info"
                            @click="showSkuInfo(row.id)"
                        ></el-button>
                    </el-tooltip>

                    <el-popconfirm :title="`确定删除 ${row.skuName} 吗`" @onConfirm="deleteSku(row.id)">
                        <el-button
                            style="margin-left: 10px"
                            slot="reference"
                            type="danger"
                            size="mini"
                            icon="el-icon-delete"
                            title="删除"
                        ></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :current-page="page"
            :total="total"
            :page-size="limit"
            :page-sizes="[5, 10, 20, 30, 40, 50]"
            style="padding: 20px 0; text-align: center"
            layout="prev, pager, next, jumper, ->, sizes, total"
            @current-change="getSkuList"
            @size-change="changeSize"
        />

        <el-drawer :visible.sync="isShowSkuInfo" :with-header="false" size="50%">
            <el-row>
                <el-col :span="5">名称</el-col>
                <el-col :span="16">{{ skuInfo.skuName }}</el-col>
            </el-row>

            <el-row>
                <el-col :span="5">描述</el-col>
                <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
            </el-row>

            <el-row>
                <el-col :span="5">价格</el-col>
                <el-col :span="16">{{ skuInfo.price }} 元</el-col>
            </el-row>

            <el-row>
                <el-col :span="5">平台属性</el-col>
                <el-col :span="18">
                    <el-tag
                        type="success"
                        style="margin-right: 5px"
                        v-for="value in skuInfo.skuAttrValueList"
                        :key="value.id"
                    >{{ value.attrId + "-" + value.valueId }}</el-tag>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="5">商品图片</el-col>
                <el-col :span="16">
                    <!-- elment-ui的轮播图，属性height设定轮播图的高度
                    如果你要设置轮播图的宽度，没有width属性，必须自己写style样式去控制宽度-->
                    <el-carousel class="sku-carousel" trigger="click" height="400px">
                        <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                            <img :src="item.imgUrl" alt />
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </el-card>
</template>

<script>
export default {
    name: "SkuList",

    data() {
        return {
            skuList: [], // SKU列表
            loading: false, // 是否正在加载中
            total: 0, // 数据库中的总记录数
            page: 1, // 默认页码
            limit: 10, // 每页记录数

            skuInfo: {},
            isShowSkuInfo: false,
        };
    },

    mounted() {
        this.getSkuList();
    },

    methods: {
        //修改sku 没有接口没法做
        toUpdateSku() {
            this.$message.info("正在开发中...");
        },

        async showSkuInfo(id) {
            this.isShowSkuInfo = true;
            const result = await this.$API.sku.get(id);
            this.skuInfo = result.data;
        },

        /*
        异步获取指定页码的sku列表
        */
        async getSkuList(page = 1) {
            this.page = page;
            this.loading = true;
            const result = await this.$API.sku.getList(this.page, this.limit);
            this.skuList = result.data.records;
            this.total = result.data.total;
            this.loading = false;
        },

        /*
        对指定SKU进行上架的请求
        */
        onSale(skuId) {
            this.$API.sku.onSale(skuId).then((result) => {
                this.$message({
                    type: "success",
                    message: "上架成功!",
                });
                this.getSkuList(this.page);
            });
        },

        /*
        对指定SKU进行下架的请求
        */
        cancelSale(skuId) {
            this.$API.sku.cancelSale(skuId).then((result) => {
                this.$message({
                    type: "success",
                    message: "下架成功!",
                });
                this.getSkuList(this.page);
            });
        },

        /*
        当页码发生改变自动调用
        */
        changeSize(size) {
            this.limit = size;
            this.getSkuList(1);
        },

        /*
        删除SKU
        */
        async deleteSku(skuId) {
            try {
                await this.$API.sku.remove(skuId);
                this.$message.success("删除SKU成功");
                this.getSkuList(1);
            } catch (error) {
                this.$message({
                    message: error.message || "删除SKU失败",
                    type: "error",
                });
            }
        },
    },
};
</script>


// <style lang="scss">
// // 下面这样写的方案以后用的很少
// .sku-list {
//   .el-carousel__indicator {
//     button {
//       display: inline-block;
//       width: 50px;
//       height: 50px;
//       border-radius: 50%;
//       background-color: yellowgreen;
//     }
//   }
// }
//
</style>

<style lang="scss" scoped>
// 让轮播图的横杠指示器变为小圆点  添加scoped
// 1、把要想实现的样式，重新来一个style 不加scoped
// 2、使用深度作用选择器

// 虽然我们可以使用上述两种方案解决这一的事情
// 当样式当中有scoped的时候，为什么有写直接添加样式就能生效
// 而有些添加样式是不生效？

// 如果样式直接作用在当前这个组件的html元素身上
// 或者样式直接作用在子组件的跟元素身上，那么样式就会生效
// 如果样式作用的不是本组件的元素，也不是子组件的根元素，那么样式不会生效

.sku-list {
    .el-row {
        height: 40px;
        .el-col {
            line-height: 40px;
            &.el-col-5 {
                font-size: 18px;
                font-weight: bold;
                text-align: right;
                margin-right: 20px;
            }
        }
    }

    .sku-carousel {
        width: 400px;
        border: 1px solid #ccc;
        img {
            width: 400px;
            height: 400px;
        }

        // 下面我们写的这些选择器  都不是组件根元素也不是我本组件的东西
        // 所以样式是不会生效的
        ::v-deep .el-carousel__indicator {
            button {
                display: inline-block;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: yellowgreen;
            }
        }
    }
}
</style>